{% extends "player/base.html" %}

{% block head %}

<script language="javascript">

	$(document).ready(function(){	
		var goals_A ;
		var goals_B ;
		
		
		reset_goals = function(){
			goals_A = 0;
			goals_B = 0;
			$('input[team]').each(function(x,y){
								
				if ($(y).attr('team') == 'A'){				
					goals_A += parseInt($(y).val());
				}
				else { goals_B += parseInt($(y).val())}
				
			})
			
			$('#gol_A').val(goals_A)
			$('#gol_B').val(goals_B)
			
		}
		
		$('input[type=radio]').click(function(sender){
			team = $(sender.currentTarget).val();			
			sp = $(document.createElement("span")).append($(sender.currentTarget).attr('player'));
			inp = $(document.createElement("input")).addClass("gol_small").attr('team',team).val(0)			
			p = $(document.createElement("p")).append(sp).append(inp)
			$('#players_'+team).append(p);
			inp.change(function(){
				reset_goals()			
						
			})
			
		});
	})
	
</script>

{% endblock %}

{% block main %}
<h2>Partido</h2>
{{match.name}} {{match.datetime}}

<h2>Como Jugamos</h2>
<div class="grid_3">
	{% for mp in match.match_players %}
		<p>
			<span class="match_end_player"><img src="{{mp.player.get_pict}}" />{{mp.player.first_name}}</span>
			A<input value="A" player="{{mp.player.email}}"  name="{{mp.key.id}}" type="radio" />
			B<input value="B" player="{{mp.player.email}}" name="{{mp.key.id}}" type="radio"/>
		</p>
	{% endfor %}
</div>


<div class="grid_3 alpha omega">
	<p>Equipo A</p>
	<p>Jugador - Goles</p>
	<div id="players_A"></div>
	<p class="goles_p"><input id="gol_A" value=0 /></p>
	
</div>

<div class="grid_3	alpha omega">
	<p>Equipo B</p>
	<p>Jugador - Goles</p>
	<div id="players_B"></div>
	<p class="goles_p"><input id="gol_B" value=0 /></p>	
</div>




{% endblock %}

